﻿@page "/"
<LayoutContent>
<img src="img\tdesign-blazor-banner.png"/>

<h2>环境</h2>
@Code.Create(@"
* .NET 6
* .NET 7
")

<h2>安装</h2>
<h3>Nuget 管理</h3>
@Code.Create(@"
```
> Install-Package TDesign
```
")

<h3>引入必要文件</h3>

@Code.Create(@"
```html
<head>
    ...
    <link rel=""stylesheet"" href=""_content/TDesign/tdesign-blazor.css"" /> <!--必要样式-->
    ...
</head>
```
")

<h3>在 <code>_Import.razor</code> 引入命名空间</h3>
@Code.Create(@"
```
@using TDesign
```
")

<h3>注册服务</h3>
@Code.Create(@"
```
builder.Services.AddTDesign();
```
")

<h3>修改 App.razor </h3>

@Code.Create(@"
```cshtml-razor
<Router AppAssembly=""@typeof(App).Assembly"">
    <Found Context=""routeData"">
        <RouteView RouteData=""@routeData"" DefaultLayout=""@typeof(MainLayout)"" />
        <FocusOnNavigate RouteData=""@routeData"" Selector=""h1"" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView TLayout=""@typeof(MainLayout)"">
            <p role=""alert"">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

<TDesignContainer/><!--增加组件-->
```
")
</LayoutContent>
@code {
    [Inject] public IJSRuntime JSRuntime { get; set; }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("highlight");
        }
    }
}
